<!DOCTYPE html>
<!-- saved from url=(0092)file:///C:/Users/Administrator/Desktop/%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE%E5%99%A81.2.html -->
<html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>My Music Player</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: "Microsoft YaHei", sans-serif;
		}

		h1 {
			font-size: 36px;
			text-align: center;
			margin-top: 50px;
		}

		.container {
			max-width: 800px;
			margin: 0 auto;
			padding: 20px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			border-radius: 10px;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, .2);
			background-color: #fff;
		}

		audio {
			width: 100%;
			display: block;
			margin-bottom: 30px;
		}

		button {
			margin: 0 10px;
			padding: 10px;
			border: none;
			outline: none;
			cursor: pointer;
			background-color: #f44336;
			color: #fff;
			border-radius: 5px;
			transition: all .3s ease;
		}

		button:hover {
			background-color: #333;
		}

		button:active {
			transform: scale(0.98);
		}

		button:first-child {
			margin-left: 0;
		}

		button:last-child {
			margin-right: 0;
		}

		.select-wrapper {
			position: relative;
			margin-right: 10px;
		}

		.select-wrapper:after {
			content: '';
			position: absolute;
			top: 50%;
			right: 0;
			margin-top: -3px;
			border: 5px solid transparent;
			border-top-color: #f44336;
		}

		select {
			width: 100%;
			padding: 10px;
			border: none;
			outline: none;
			font-size: 16px;
			appearance: none;
			-webkit-appearance: none;
			background-color: transparent;
			color: #333;
			border-bottom: 1px solid #ccc;
			cursor: pointer;
			transition: all .3s ease;
		}

		select:hover {
			background-color: #f5f5f5;
		}

		select:focus {
			border-bottom-color: #f44336;
		}

		.list-wrapper {
			width: 100%;
			margin-bottom: 30px;
			overflow: auto;
		}

		ul {
			list-style: none;
		}

		li {
			margin-bottom: 10px;
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 5px;
			background-color: #f5f5f5;
			cursor: pointer;
			transition: all .3s ease;
		}

		li:hover {
			background-color: #e5e5e5;
		}

		li.active {
			background-color: #f44336;
			color: #fff;
		}

		li.active:hover {
			background-color: #f44336;
			color: #fff;
		}

		.input-wrapper {
			position: relative;
			margin-right: 10px;
		}

		.input-wrapper input[type="file"] {
			position: absolute;
			top: 0; left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			cursor: pointer;
		}

		input[type="range"] {
			width: 100%;
			margin-bottom: 30px;
			-webkit-appearance: none;
			background-color: transparent;
		}

		input[type="range"]::-webkit-slider-runnable-track {
			height: 5px;
			background: #ccc;
			border-radius: 2px;
		}

		input[type="range"]::-webkit-slider-thumb {
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: #f44336;
			cursor: pointer;
			-webkit-appearance: none;
			margin-top: -8px;
		}

		input[type="range"]:focus {
			outline: none;
		}

		input[type="range"]::-moz-range-progress {
			background-color: #f44336;
			height: 5px;
			border-radius: 2px;
		}

		input[type="range"]::-moz-range-thumb {
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: #f44336;
			cursor: pointer;
			margin-top: -8px;
		}

		input[type="range"]::-ms-track {
			height: 5px;
			background: transparent;
			border-color: transparent;
			color: transparent;
		}

		input[type="range"]::-ms-fill-lower {
			background-color: #ccc;
			border-radius: 2px;
		}

		input[type="range"]::-ms-fill-upper {
			background-color: #f44336;
			border-radius: 2px;
		}

		input[type="range"]::-ms-thumb {
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: #f44336;
			cursor: pointer;
			margin-top: 0;
			-webkit-appearance: none;
		}

		input[type="range"]:focus::-ms-fill-lower {
			background-color: #f44336;
		}

		input[type="range"]:focus::-ms-fill-upper {
			background-color: #ccc;
		}

		@media (max-width: 640px) {
			h1 {
				font-size: 28px;
			}

			.container {
				border-radius: 0;
			}
		}
	</style>
</head>
<body>
	<h1>音乐播放器</h1>

	<div class="container">
		<!-- 播放器控制区域 -->
		<audio id="audio-player"></audio>

		<div>
			<button onclick="play();" id="play-button">播放</button>
			<button onclick="pause();" id="pause-button">暂停</button>
			<button onclick="stop();" id="stop-button">停止</button>
			<button onclick="previous();" id="previous-button">上一曲</button>
			<button onclick="next();" id="next-button">下一曲</button>
			<div class="select-wrapper">
				<select onchange="setPlayMode();" id="play-mode-selector">
					<option value="sequencial">顺序播放</option>
					<option value="shuffle">随机播放</option>
					<option value="loop">循环播放</option>
				</select>
			</div>
		</div>

		<!-- 媒体库管理 -->
		<div class="input-wrapper">
			<input type="file" accept="audio/*" onchange="addMedia(this.files);" multiple="">
			<span>添加音乐文件</span>
		</div>

		<!-- 播放列表 -->
		<div class="list-wrapper">
			<ul id="playlist"></ul>
		</div>

		<!-- 均衡器 -->
		<div>
			<input type="range" min="0" max="1" step="0.01" value="1" onchange="setEqualizer();" id="equalizer-slider">
		</div>
	</div>

	<!-- 脚本代码区域 -->
	<script type="text/javascript">
		var audioPlayer = document.getElementById("audio-player");
		var playButton = document.getElementById("play-button");
		var pauseButton = document.getElementById("pause-button");
		var stopButton = document.getElementById("stop-button");
		var previousButton = document.getElementById("previous-button");
		var nextButton = document.getElementById("next-button");
		var playlist = document.getElementById("playlist");
		var equalizerSlider = document.getElementById("equalizer-slider");
		var playModeSelector = document.getElementById("play-mode-selector");

		var mediaFiles = [];
		var currentSongIndex = 0;
		var playMode = "sequencial";

		// 添加新的媒体文件
		function addMedia(files) {
			for (var i = 0; i < files.length; i++) {
				if (files[i].type == "audio/mp3" || files[i].type == "audio/mpeg") {
					var fileURL = URL.createObjectURL(files[i]);
					var songTitle = files[i].name;
					var playlistItem = document.createElement("li");
					var playlistLink = document.createElement("a");
					playlistLink.href = fileURL;
					playlistLink.innerHTML = songTitle;
					playlistLink.onclick = function() {
						currentSongIndex = Array.from(playlist.children).indexOf(this.parentElement);
						loadSong();
					}
					playlistItem.appendChild(playlistLink);
					playlist.appendChild(playlistItem);
					mediaFiles.push({ title: songTitle, url: fileURL });
				}
			}
		}

		// 播放
		function play() {
			audioPlayer.play();
			playButton.style.display = "none";
			pauseButton.style.display = "inline";
		}

		// 暂停
		function pause() {
			audioPlayer.pause();
			playButton.style.display = "inline";
			pauseButton.style.display = "none";
		}

		// 停止
		function stop() {
			audioPlayer.pause();
			audioPlayer.currentTime = 0;
			playButton.style.display = "inline";
			pauseButton.style.display = "none";
		}

		// 上一曲
		function previous() {
			if (currentSongIndex > 0) {
				currentSongIndex--;
			} else {
				currentSongIndex = mediaFiles.length - 1;
			}
			loadSong();
		}

		// 下一曲
		function next() {
			if (currentSongIndex < mediaFiles.length - 1) {
				currentSongIndex++;
			} else {
				currentSongIndex = 0;
			}
			loadSong();
		}

		// 加载当前歌曲
		function loadSong() {
			audioPlayer.src = mediaFiles[currentSongIndex].url;
			audioPlayer.load();
			play();
			updatePlaylist();
		}

		// 更新播放列表样式
		function updatePlaylist() {
			for (var i = 0; i < playlist.children.length; i++) {
				if (i === currentSongIndex) {
					playlist.children[i].classList.add('active');
				} else {
					playlist.children[i].classList.remove('active');
				}
			}
		}

		// 设置播放模式
		function setPlayMode() {
			playMode = playModeSelector.value;
		}

		// 设置均衡器
		function setEqualizer() {
			audioPlayer.volume = equalizerSlider.value;
		}
	</script>


```</body></html>